import React, { Component } from 'react'
// import Navbar from './NavBar/navbar'
import NavBar2 from './NavBar2/NavBar2'

export class App extends Component {
  render() {
    return (
      <div className="app">
        {/* 
          本质是React。createElement(type, config, children)的形式，弊端：children可能是一个元素，有可能是一个数组，需要使用的索引 
            childern只有一个元素时，内部插槽就不是数组形式，而是当个对象
        */}
        {/* <Navbar>
          <button>按钮</button>
          <h2>我是标题</h2>
          <i>斜体文字</i>
        </Navbar> */}

        <NavBar2
          leftSlot={<button>按钮</button>}
          centerSlot={<h2>我是标题</h2>}
          rightSlot={<i>斜体文字</i>}
        />
      </div>
    )
  }
}

export default App
